<template>
	<div id="">
		<div class="header-title">
			用户列表
		</div>
		<!-- 表格数据 -->
		<div class="bg-white m-2 p-2">
			<div class="from flex align-center justify-between flex-wrap">
				<div class="flex align-center flex-wrap">
					<!-- 点击选择部门 -->
					<div class="flex align-center"  >
						<span>部门/人员：</span>
						<div class="normol-width flex justify-between align-center px-1" @click="click_part()">
							<div :class="deprtpeo?'text-black':'text-muted'">
								{{deprtpeo||'请选择'}}
							</div>
							<a-icon type="down"  class="text-muted"/>
						</div>
					</div>
					<!-- 关键词 -->
					<div class="ml-3">
						<span>关键词：</span>
						<a-input class="normol-width" v-model="keyword" placeholder="请输入关键词" />
					</div>
					<div class="ml-3 flex align-center">
						<a-radio :checked="radiocheck" @click="click_check()">离职人员</a-radio>
						<a-tooltip>
							<template slot="title">
								接入系统之后离职的人员
							</template>
							<a-icon class="tips font15 cursor-pointer" type="exclamation-circle" />
						</a-tooltip>
					</div>
				</div>
				<div>
					<a-button type="primary" @click="click_search()">
						查询
					</a-button>
					<a-button class="ml-2" @click="click_reset()">
						重置
					</a-button>
				</div>
			</div>
			<div class="flex align-center mt-2 flex-wrap">
				<a-button type="primary" icon="save" @click="click_export()">
					导出报表
				</a-button>
				<a-button icon="pay-circle" class="ml-2" @click="click_showModel()">
					批量充值
				</a-button>
				<a-button type="danger" ghost class="ml-2"  @click="click_showModel2()">
					清空余额
				</a-button>
				<div class="ml-2 text-primary">
					<a-popover placement="rightBottom" v-model="clicked" trigger="click">
						<template slot="title">
							<span class="font-weight-bold">自定义列</span>
						</template>
						<template slot="content">
							<a-checkbox-group class="a-popover" v-model="pOptionDsefault"  name="checkboxgroup" @change="onChange">
								<a-row>
								      <a-col :span="12" v-for="(item,index) in plainOptions">
								        <a-checkbox :value="item">
								          {{item}}
								        </a-checkbox>
								      </a-col>
								</a-row>
							</a-checkbox-group>
						</template>
						<div class="flex align-center cursor-pointer " @click="click_custom()">
							<a-icon type="setting" class="font16" />
							<span class="ml-1 font">自定义列</span>
						</div>
					</a-popover>

				</div>
			</div>
			<div class="table mt-2">
				<a-table :columns="columns" :data-source="data">
					<a-pagination @change="onChange" :pagination="pagination"  loading="loading"/>
				</a-table>
			</div>

		</div>
		<!-- 弹框组件显示 -->
		<div>
			<a-modal v-model="modal1" title="批量充值" centered ok-text="确认" cancel-text="取消" @ok="click_handleOk()" @cancel="click_showModel()" :maskClosable='false' :confirmLoading="false">
				<div class="px-5 mx-2">
					<a-alert message="请勿编辑模版内除 “充值余额” 以外的信息" type="info" show-icon />
					<div class="flex align-center justify-between my-1">
						<div class="text-black">
							测试qwe.xshi
						</div>
						<div>
							<a-button icon="download" class="bg-light" :size="size">
								下载模板
							</a-button>
						</div>
					</div>
					<div class="">
						<a-upload-dragger
							name="file"
							:file-list="fileList"
							:customRequest="customRequest"
							:remove="delremove"
							action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
							@change="handleChange"
						  >
							<p class="ant-upload-drag-icon text-primary">
							  <a-icon type="inbox" />
							</p>
							<div class="font-weight-bold">
							  点击或将文件拖拽到这里上传
							</div>
							<div class="ant-upload-hint font-sm">
							 该上传文件仅支持扩展名：xlsx
							</div>
						  </a-upload-dragger>
					</div>
				</div>
			</a-modal>
			
			<a-modal v-model="modal2" title="清空余额" centered ok-text="确认" cancel-text="取消" @ok="click_handleOk2()" @cancel="click_showModel2()" :maskClosable='false' :confirmLoading="false">
				<div class="">
					<a-alert message="请勿编辑模版内除 “充值余额” 以外的信息" type="info" show-icon />
					<div class="flex align-center my-2">
						<div class="text-black">部门/人员：</div>
						<div class=" partment-width  flex justify-between align-center px-1" @click="click_part()">
							<div :class="deprtpeo?'text-black':'text-muted'">
								{{deprtpeo||'请选择'}}
							</div>
							<a-icon type="down"  class="text-muted"/>
						</div>
					</div>
				</div>
			</a-modal>
			<!-- 部门人员弹框 -->
			<chooseDeprt ref="chooseDepart"></chooseDeprt>
		</div>
		
	</div>
</template>

<script>
	const columns = [
		{title: '编号',dataIndex: 'id',align: 'center'},
		{title: '姓名',dataIndex: 'xname',align: 'center'},
		{title: '工号',dataIndex: 'gnum',align: 'center'},
		{title: '部门',dataIndex: 'department',align: 'center'},
		{title: '职位',dataIndex: 'post',align: 'center'},
		{title: '部门路径',dataIndex: 'dptpath',	align: 'center'	},
		{title: '账户余额',dataIndex: 'balance',	align: 'center'	},
		{title: '在职状态',dataIndex: 'status',align: 'center'}
	];
	const plainOptions=[],pOptionDsefault=[];
	columns.forEach((k)=>{
		plainOptions.push(k.title);
		pOptionDsefault.push(k.title);
	});
	const data = [];
	for (let i = 0; i < 46; i++) {
		data.push({
			key: i,
			id: i + 1,
			xname: `123${i}`,
			gnum: `Edward  ${i}`,
			department: ` ng ${i}`,
			post: ` ing ${i}`,
			dptpath: `Edwaring ${i}`,
			balance: 32,
			status: `London, Park Lane no. ${i}`,
		});
	}
	// 选择部门人员组件
	import chooseDeprt from '@/components/chooseDeprt.vue';
	export default {
		components: {
			chooseDeprt
		},
		data() {
			return {
				size: 'default',
				clicked: false,
				plainOptions:plainOptions,//自定义列
				pOptionDsefault: plainOptions,//自定义列选中数据
				value: [],
				data:data,//表格数据
				columns:columns,//表格列表
				pagination:{},//表格分页
				currentPage:'1',//页数
				pageSize:'10',//每页数据
				modal1:false,
				modal2:false,
				modal3:false,
				fileList:[],
				deprtpeo:'',//请选择部门人员
				keyword:'',//请输入关键词
				radiocheck:false,//离职人员单选按钮
				isleave:'1',//是否返回离职人员1否0是
			};
		},
		created(){
			this.get_users();
		},
		methods: {
			//查询人员
			get_users(){
				axios.post('/account/get_ls', {
					deprtpeo:this.deprtpeo,
					keyword:this.keyword,
					currentPage:this.currentPage,
					pageSize:this.pageSize,
					fiter:'1',//回总数
					isleave:this.isleave,//是否返回离职人员1否0是
				}).then(res => {
					if (res.status == 200) {
						console.log(res.data);
						let data=res.data.data.data;
						for (let i = 0; i < 46; i++) {
							this.data.push({
								key: i,
								id: i + 1,
								xname: `123${i}`,
								gnum: `Edward  ${i}`,
								department: ` ng ${i}`,
								post: ` ing ${i}`,
								dptpath: `Edwaring ${i}`,
								balance: 32,
								status: `London, Park Lane no. ${i}`,
							});
						}
						this.pagination.total=res.data.data.count
					}
				}).catch(res => {
					console.log(res);
				});
			},
			
			//点击选择部门人员
			click_part(){
				this.$refs.chooseDepart.openWin();
			},
			//单选框是否选中
			click_check(){
				this.radiocheck=!this.radiocheck;
				this.isleave=this.radiocheck?'0':'1';
			},
			//废弃使用
			click_checkGroup(e){
				console.log(e);
				this.columns.splice(e, 1); 
				this.data.splice(e, 1);
			},
			//自定义列切换选中状态
			onChange(checkedValues) {
				console.log('checked = ', checkedValues);
				console.log('value = ', this.value);
			},
			//自定义列
			click_custom() {
				this.clicked = !this.clicked;
			},
			
			// 充值弹框
			click_showModel(){
				this.modal1=!this.modal1
			},
			// 确认充值弹框
			click_handleOk(){
				this.$message.info('1231',1);
				this.click_showModel();
			},
			// 官方上传记录
			handleChange(info) {
			    const status = info.file.status;
			    if (status !== 'uploading') {
			       console.log(info.file, info.fileList);
			    }
			    if (status === 'done') {
			        this.$message.success(`${info.file.name} file uploaded successfully.`);
			    } else if (status === 'error') {
			        this.$message.error(`${info.file.name} file upload failed.`);
			    }
			},
			// 自定义上传
			customRequest(obj) {
			    let rep = {
			        uid: obj.file.uid,
			        name: obj.file.name,
			        status: "done",
			        url: window.URL.createObjectURL(obj.file),
			        thumbUrl: window.URL.createObjectURL(obj.file),
			    };
				this.fileList=[];
			    this.fileList.push(rep);
				// console.log(obj.file, window.URL.createObjectURL(obj.file), "pbj");
			},
			// 移除上传记录
			delremove(){
				this.fileList=[];
			},
			//清空余额一级框显示
			click_showModel2(){
				this.modal2=!this.modal2;
			},
			// 清空余额一级弹框确认按钮
			click_handleOk2(){
				let that=this;
				this.click_showModel2();
				that.$confirm({
				        title: '确定要清空余额吗？',
				        content:  '确定要清空余额吗？',
						centered:true,
				        onOk() {
							that.$message.info('清空余额成功',1);
							console.log('OK');
				        },
				        onCancel() {
				          // console.log('Cancel');
				        },
				        class: 'test',
				      });
				// this.click_handleOk3();
			},
			//清空余额二级弹框确认按钮
			click_handleOk3(){
				this.modal3=!this.modal3;
				
				this.$message.info('清空余额成功',1);
			},
			//清空余额二级弹框取消按钮
			click_showModel3(){
				this.$message.error('清空余额失败，请检查网络再次操作。',1);
			},
			//导出报表使用的数据json
			formatJson(filterVal, jsonData) {
				console.log(jsonData)
				return jsonData.map(v => filterVal.map(j => {
				  if (j === 'timestamp') {
				    return parseTime(v[j])
				  } else {
				    return v[j]
				  }
				}))
			},
			//导出报表方法
			click_export(){
				import('@/vendor/Export2Excel').then(excel => {
				  const tHeader = [];//表头
				  const filterVal = [];//表头对应字段
				  columns.forEach(k=>{
					  tHeader.push(k.title);
					  filterVal.push(k.dataIndex);
				  })
				  const list = this.data
				  const data = this.formatJson(filterVal, list)
				  excel.export_json_to_excel({
					title:'ceshi',
				    header: tHeader,
				    data,
				    filename: "1231",
				    autoWidth: true,
				    bookType: 'xlsx'
				  })
				  this.downloadLoading = false
				})
			},
			//查询方法
			click_search(){
				this.get_users();
			},
			//重置方法
			click_reset(){
				
			},
			
		}
	};
</script>

<style scoped>
	.header-title {
		padding: 0 32px;
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		text-align: left;
		font-weight: bold;
		background-color: #FFFFFF;
	}

	.normol-width {
		width: 200px;
		height: 32px;
		border-radius: 5px;
		border:1px solid #d9d9d9
	}
	.tips {
		color: #d3d3d3;
	}
	.partment-width{
		margin-left: 50px;
		width: 300px;
		height: 32px;
		border-radius: 5px;
		border:1px solid #d9d9d9
	}
	.a-popover{
		width: 250px;
	}
	.ant-table-thead > tr > th{
		font-weight: bold;
	}
</style>
